<template>
  <up-swipe-action >
    <up-swipe-action-item
      v-model:show="show"
      :options="options1"
      @click="deleteShopCart"
    >
      <view class="productItem">
        <view @click="selectProduct">
          <div v-if="record.select">
            <up-icon name="checkmark-circle-fill" color="#79C435" size="46rpx"></up-icon>
          </div>
          <div v-else style="width: 42rpx;height: 42rpx; border: 1rpx solid #979797; border-radius: 50%;"></div>
        </view>
        <view style="height: 176rpx;width: 176rpx; margin: 0 30rpx;">
          <u-image height="176" width="176" :src="record.goodsPic" :lazy-load="true" @click="goProductDetail" mode="aspectFit"></u-image>
        </view>
        <view style="flex: 1; display: flex; flex-direction: column; min-height: 186rpx; justify-content: space-between;">
          <view>
            <up-text type="" color="#000" size="36" :bold="true" :text="record.name" :lines="2"></up-text>
          </view>
          <view class="row" style="justify-content: space-between;">
            <view class="price" style="margin-top: 16rpx;">
              <view class="unit">￥</view>
              <view class="categoryPrice">{{ record.price }}</view>
            </view>
            <u-number-box v-model="value" :asyncChange="true" :min="1" integer :buttonSize="60" inputWidth="70" @change="valChange"></u-number-box>
          </view>
        </view>
      </view>
    </up-swipe-action-item>
  </up-swipe-action>
  <up-toast ref="uToastRef"></up-toast>
</template>

<script>
import { deleteCarOrderById, editShoppingCarNum } from '@/services/shopCart';
export default {
  props: {
    record: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    record(newV) {
      this.value = newV.num;
    }
  },
  created() {
    this.value = this.record.num;
  },
  data() {
    return {
      show: false,
      options1: [{
        text: '删除',
        style: {
          backgroundColor: '#f56c6c'
        }
      }],
      value: 0,
    }
  },
  methods: {
    goProductDetail() {
      const { goodsId } = this.record;
      uni.navigateTo({
        url: `/pages/productDetail/index?id=${goodsId}`,
      })
    },
    selectProduct() {
      console.log('selectProduct');
      this.$emit('selectProduct', this.record.id);
    },
    async valChange(e) {
      this.$refs.uToastRef.show({
        type: 'loading',
        title: '正在加载',
        message: "正在加载",
        duration: -1
      })
      editShoppingCarNum({
        id: this.record.id,
        num: e.value
      }).then((res) => {
        if (res.success) {
          this.$emit('valChange', {
            num: e.value,
            id: this.record.id,
          });
        }
      }).finally(() => {
        this.$refs.uToastRef.hide();
      })
    },
    deleteShopCart({ name, index }) {
      this.$refs.uToastRef.show({
        type: 'loading',
        title: '正在加载',
        message: "正在加载",
        duration: -1
      })
      deleteCarOrderById({
        id: this.record.id
      }).then((res) => {
        if (res.success) {
          this.$emit('deleteShopCart', this.record.id)
        }
      }).finally(() => {
        this.$refs.uToastRef.hide();
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.productItem{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30rpx;
  width: calc(100vw - 60rpx);
}
.price {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  padding-bottom: 10rpx;
}
.unit {
  color: #59B235;
  font-size: 24rpx;
  line-height: 24rpx;
}
.categoryPrice {
  color: #59B235;
  font-size: 32rpx;
  line-height: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-weight: 600;
}
</style>